<template>
	<view class="user-info">
		<view class="user-top">
			<view class="user-top-1">
				<view class="avatar">
					<image :src="userInfo.avatar||''" mode="widthFix"></image>
				</view>
				<view class="nickname">
					<view class="nickname-1">{{userInfo.nickname||''}}</view>
					<view class="nickname-2">发布数：{{userInfo.publish_num||0}}</view>
				</view>
				<view class="follow">
					<view v-if="!isFollow" class="follow-btn" @click="follow">+关注</view>
					<view v-else class="follow-btn" @click="follow">已关注</view>
				</view>
			</view>
			<view class="user-top-2">
				<view class="num-info"><text class="num">{{userInfo.follow_num||0}}</text>关注</view>
				<view class="num-info"><text class="num">{{userInfo.fans_num||0}}</text>粉丝</view>
			</view>
			<view class="user-top-3">
				{{userInfo.intro||''}}
			</view>
		</view>
		<view class="user-title">
			<view>商品列表</view>
			<view @click="toCateList" style="display: flex;align-items: center;color: gray;">
				<text>更多</text>
				<view class="iconfont icon-xiangyou" style="padding-left: 5rpx;"></view>
			</view>
		</view>
		<view class="user-m-type-bar" style="margin-bottom: 10rpx;">
			<view class="bar-item" :class="{curr:currCateIndex==index}" @click="selectCate(index)" v-for="(item,index) in cateList" :key="item.id">{{item.cate_name}}</view>
		</view>
<!-- 		<view class="user-m-type-bar">
			<view class="bar-item" :class="{curr:currMTypeIndex==index}" @click="selectMType(index)" v-for="(item,index) in mTypeList" :key="item.id">{{item.title}}</view>
		</view> -->
		<view class="user-product-list">
			<view class="list">
				<v-goods v-for="(item,index) in list" :key="item.id" :index="index" :item="item" @active="toDetail"></v-goods>
			</view>
			<view v-if="list.length > 0" @click="getProductList">
				<v-loadmore :status="loadStatus"></v-loadmore>
			</view>
			<v-nodata v-else-if="page > 1"></v-nodata>
		</view>
		<v-home></v-home>
	</view>
</template>

<script>
	let that
	import {mapGetters} from "vuex"
	import {toLogin} from "@/libs/login.js"
	import tool from "@/extend/tool.js"
	export default{
		data(){
			return {
				uid: 0,
				userInfo: {},
				isFollow: false,
				mTypeList: [],
				currMTypeIndex: 0,
				currMType: {},
				cateList: [],
				currCateIndex: 0,
				currCate: {},
				
				list: [],
				loadStatus: "more",
				page: 1,
				total: 0,
				isReset: false
			}
		},
		computed:{
			...mapGetters(['isLogin'])
		},
		onLoad(opts){
			that = this
			this.uid = parseInt(opts.uid || 0)
			this.getInitDataUserInfo();
			this.getProductList();
		},
		methods:{
			selectMType(index){
				if(this.currMTypeIndex == index) return;
				this.currMTypeIndex = index;
				this.currMType = this.mTypeList[this.currMTypeIndex]
				this.reload()
			},
			selectCate(index){
				if(this.currCateIndex == index) return;
				this.currCateIndex = index;
				this.currCate = this.mTypeList[this.currCateIndex]
				this.reload()
			},
			follow: tool.debounce(()=>{
				that.doFollow()
			}),
			doFollow(){
				this.$login.judgeLogin(()=>{
					this.$http.post("v1/followUserInfo/"+this.userInfo.uid).then(res=>{
						this.$tool.tip(res.msg);
						this.getInitDataUserInfo();
					})
				});
			},
			getInitDataUserInfo(){
				this.$http.get("v1/getInitDataUserInfo/"+this.uid).then(res=>{
					this.userInfo = res.data.userInfo
					this.isFollow = res.data.isFollow
					this.mTypeList = res.data.mTypeList
					this.cateList = res.data.cateList
					this.currMType = res.data.mTypeList[this.currMTypeIndex]
				})
			},
			getProductList(){
				if (this.loadStatus != "more") return;
				this.loadStatus = "loading";
				
				let params = {
					cate_id: this.currCate.id,
					m_type_id: this.currMType.id,
					uid: this.uid
				}
				this.$http.post("v1/getProductListByUidAndMTypeId?page=" + this.page, params).then(res=>{
					let data = res.data.pageData;
					if(this.page == 1) this.total = data.total;
					if(this.isReset) {
						this.list = [];
						this.isReset = false;
					}
					
					this.list.push(...data.data);
					
					if(this.list.length >= this.total) this.loadStatus = "nomore";
					else this.loadStatus = "more";
					
					this.page++;
				}).catch(err => {
					this.loadStatus = "more";
				});
			},
			reset(){
				this.loadStatus = "more";
				this.page = 1;
				this.total = 0,
				this.isReset = true;
			},
			reload(){
				this.reset();
				this.getProductList();
			},
			toDetail(id){
				this.$tool.navto(`/pages/goods_details/index?id=${id}`);
			},
			toCateList(){
				this.$tool.relaunch(`/pages/goods_cate/goods_cate?cateId=0`)
			}
		},
		onReachBottom() {
			this.getProductList();
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
	}
	.user-info{
		width: 100%;
		.user-top{
			@include flex();
			flex-direction: column;
			padding: 20rpx;
			background-color: $uni-color-primary;
			.user-top-1{
				width: 100%;
				@include flex();
				align-items: center;
				justify-content: space-between;
				color: #fff;
				.avatar{
					width: 20%;
					image{
						width: 100%;
						border-radius: 50%;
					}
				}
				.nickname{
					width: 60%;
					padding-left: 20rpx;
					.nickname-1{
						font-size: 50rpx;
					}
				}
				.follow{
					width: 20%;
					.follow-btn{
						@include flex();
						justify-content: center;
						align-items: center;
						background-color: $uni-color-warning;
						font-size: 30rpx;
						font-weight: bold;
						width: 150rpx;
						height: 60rpx;
						white-space: nowrap;
						border-radius: 30rpx;
					}
				}
			}
			.user-top-2{
				@include flex();
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				color: #fff;
				.num-info{
					.num{
						font-size: 40rpx;
						margin-right: 10rpx;
					}
					&:last-child{
						margin-left: 40rpx;
					}
				}
			}
			.user-top-3{
				padding-top: 30rpx;
				padding-bottom: 20rpx;
				border-top: 1px solid #519eed;	
				color: #fff;
				font-size: 30rpx;
			}
		}
		.user-title{
			padding: 20rpx 10rpx;
			font-weight: bold;
			@include flex();
			justify-content: space-between;
			align-items: center;
			.iconfont{
				padding: 0 20rpx;
			}
		}
		.user-m-type-bar{
			@include flex();
			width: 750rpx;
			overflow-x: auto;
			.bar-item{
				@include flex();
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				background-color: #ccc;
				font-size: 30rpx;
				width: 150rpx;
				height: 60rpx;
				white-space: nowrap;
				// border-radius: 30rpx;
				color: #fff;
				border-right: 1px solid #ccc;
				&:last-child{
					border-right: none;
				}
				&.curr{
					font-weight: bold;
					background-color: $uni-color-warning;
				}
			}
		}
		.user-product-list{
			.list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 10rpx;
			}

		}
	}
</style>